:root,
page {
  /* 主题色hsl*/
  --h: 149;
  --s: 93%;
  --l: 39%;
  --l-dark: calc(var(--l) - 5%);
  /* 深主题色 l */

  --hsl: var(--h), var(--s), var(--l);
  /* 主题色hsl*/
  --hsl-dark: var(--h), var(--s), var(--l-dark);
  /* 深主题色hsl*/

  --color: hsl(var(--hsl));
  /* 主题色 hsl(149, 93%, 39%)*/
  --color-dark: hsl(var(--hsl-dark));
  /* 深主题色 hsl(149, 93%, 34%) */
  --color-sub: hsl(91, 70%, 57%);
  /* 主题辅色 */

  /* ------ 主题色 递浅色阶 ------  */
  --step: calc((100% - var(--l)) / 10);
  /* 100 - 39  / 10 = 6.1 */
  --color-light-1: hsl(var(--h), var(--s), calc(var(--step) * 1 + var(--l)));
  /* hsl(149, 93%, 45%) */
  --color-light-2: hsl(var(--h), var(--s), calc(var(--step) * 2 + var(--l)));
  /* hsl(149, 93%, 51%) */
  --color-light-3: hsl(var(--h), var(--s), calc(var(--step) * 3 + var(--l)));
  /* hsl(149, 93%, 57%) */
  --color-light-4: hsl(var(--h), var(--s), calc(var(--step) * 4 + var(--l)));
  /* hsl(149, 93%, 64%) */
  --color-light-5: hsl(var(--h), var(--s), calc(var(--step) * 5 + var(--l)));
  /* hsl(149, 93%, 70%) */
  --color-light-6: hsl(var(--h), var(--s), calc(var(--step) * 6 + var(--l)));
  /* hsl(149, 93%, 76%) */
  --color-light-7: hsl(var(--h), var(--s), calc(var(--step) * 7 + var(--l)));
  /* hsl(149, 93%, 82%) */
  --color-light-8: hsl(var(--h), var(--s), calc(var(--step) * 8 + var(--l)));
  /* hsl(149, 93%, 88%) */
  --color-light-9: hsl(var(--h), var(--s), calc(var(--step) * 9 + var(--l)));
  /* hsl(149, 93%, 94%) */
  --color-light-10: hsl(var(--h), var(--s), calc(var(--step) * 9.5 + var(--l)));
  /* :hsl(149, 93%, 97%) */
  --test: hsl(149, 93%, 88%);

  /* ------ 通用字体白色 ------ */
  --font-white: #fff;

  /* 通用字体黑灰色阶  */
  --font-black: #1d2129;
  --font-black-2: hsl(0, 0%, 20%);
  /* #333*/
  --font-black-3: hsl(0, 0%, 30%);
  /* #444*/
  --font-black-4: hsl(0, 0%, 40%);
  /* #666 */
  --font-black-5: hsl(0, 0%, 50%);
  /* #808080 #777*/
  --font-black-6: hsl(0, 0%, 60%);
  /* #999*/
  --font-black-7: hsl(0, 0%, 70%);
  /* #b3b3b3 #bbb #aaa*/
  --font-black-8: hsl(0, 0%, 80%);
  /* #ccc #ddd*/
  --font-black-9: hsl(0, 0%, 90%);
  /* #e6e6e6 #eee*/

  /* ------ 通用边框白色 ------ */
  --border-white: #fff;

  /* 通用边框黑灰色阶  */
  --border-black: #1d2129;
  --border-black-2: hsl(0, 0%, 20%);
  /* #333*/
  --border-black-3: hsl(0, 0%, 30%);
  /* #444*/
  --border-black-4: hsl(0, 0%, 40%);
  /* #666 */
  --border-black-5: hsl(0, 0%, 50%);
  /* #808080 #777*/
  --border-black-6: hsl(0, 0%, 60%);
  /* #999*/
  --border-black-7: hsl(0, 0%, 70%);
  /* #b3b3b3 #bbb #aaa*/
  --border-black-8: hsl(0, 0%, 80%);
  /* #ccc #ddd*/
  --border-black-9: hsl(0, 0%, 90%);
  /* #e6e6e6 #eee*/
  --border-black-10: hsl(0, 0%, 95%);
  /* #f2f2f2 */
  --border-black-11: hsl(0, 0%, 97%);
  /* #f7f7f7 #f8f8f8 #f5f8fe #f5f7fb #fafafa #edf2f9*/

  /* ------ 通用背景白色 ------ */
  --bg-white: #fff;

  /* 通用背景黑灰色阶 */
  --bg-black: #000;
  --bg-black-1-2: hsl(0, 0%, 3%);
  /* #080808*/
  --bg-black-1-1: hsl(0, 0%, 5%);
  /* #0d0d0d*/
  --bg-black-1: hsl(0, 0%, 10%);
  /* #1a1a1a*/
  --bg-black-2: hsl(0, 0%, 20%);
  /* #333*/
  --bg-black-3: hsl(0, 0%, 30%);
  /* #444*/
  --bg-black-4: hsl(0, 0%, 40%);
  /* #666 */
  --bg-black-5: hsl(0, 0%, 50%);
  /* #808080 #777*/
  --bg-black-6: hsl(0, 0%, 60%);
  /* #999*/
  --bg-black-7: hsl(0, 0%, 70%);
  /* #b3b3b3 #bbb #aaa*/
  --bg-black-8: hsl(0, 0%, 80%);
  /* #ccc #ddd*/
  --bg-black-9: hsl(0, 0%, 90%);
  /* #e6e6e6 #eee*/
  --bg-black-10: hsl(0, 0%, 95%);
  /* #f2f2f2 */
  --bg-black-11: hsl(0, 0%, 97%);
  /* #f7f7f7 #f8f8f8 #f5f8fe #f5f7fb #fafafa #edf2f9*/

  color: var(--font-black);

  /* ------ 功能色 ------ */
  --color-success: #07c160;
  --color-warning: #faad14;
  --color-danger: #eb5e12;

  /* ------ 距离大小 ------ */
  --border-radius: 8px;
  /* 常规圆角 */
  --border-radius-small: 4px;
  /* 小圆角 */
  --border-radius-big: 16px;
  /* 大圆角 */
  --card-margin: 16px;
  /* 卡片间距 */
  --top-nav-heght: 64px;
  /* 顶部导航条高度 */
}

/* 暗黑模式 */
html.dark,
page.dark {
  --font-white: #f2f2f2;

  --font-black: var(--font-white);
  --font-black-2: hsl(0, 0%, 80%);
  --font-black-3: hsl(0, 0%, 70%);
  --font-black-4: hsl(0, 0%, 60%);

  --border-white: #f2f2f2;

  --border-black: var(--border-white);
  --border-black-2: hsl(0, 0%, 80%);
  --border-black-3: hsl(0, 0%, 70%);
  --border-black-4: hsl(0, 0%, 60%);
  --border-black-9: hsl(0, 0%, 40%);
  --border-black-10: hsl(0, 0%, 30%);
  --border-black-11: hsl(0, 0%, 20%);

  --bg-white: #141414;

  --bg-black: var(--bg-white);
  --bg-black-6: hsl(0, 0%, 70%);
  --bg-black-7: hsl(0, 0%, 60%);
  --bg-black-8: hsl(0, 0%, 50%);
  --bg-black-9: hsl(0, 0%, 40%);
  --bg-black-10: hsl(0, 0%, 30%);
  --bg-black-11: hsl(0, 0%, 20%);
}

/* 项目定制原子类 */
.g-radius {
  border-radius: 8px;
}

.g-radius-small {
  border-radius: 16px;
}

.g-radius-big {
  border-radius: 16px;
}

.g-margin {
  margin: var(--card-margin);
}

.g-margin-t {
  margin-top: var(--card-margin);
}

.g-margin-r {
  margin-right: var(--card-margin);
}

.g-margin-b {
  margin-bottom: var(--card-margin);
}

.g-margin-l {
  margin-left: var(--card-margin);
}

.g-color {
  color: var(--color);
}